/**
 * 内容： 画线
 */
import * as THREE from "../../../js/three/three.module.js";
// 场景
var scene = new THREE.Scene()
// 相机
var camera = new THREE.PerspectiveCamera(// 透视摄像机
    45,//视野角度（FOV）
    window.innerWidth/window.innerHeight,// 长宽比（aspect ratio）
    1,// 近截面（near）,比这个更近的不显示
    500// 远截面（far），比这个更远的不显示
)
camera.position.set(0,0,100);
camera.lookAt(0,0,0);

// 渲染器
var renderer = new THREE.WebGLRenderer();
renderer.setSize(window.innerWidth, window.innerHeight);
document.body.appendChild(renderer.domElement);

// 定义geometry的顶点
const points = [];
points.push(new THREE.Vector3(-10,0,0));
points.push(new THREE.Vector3(0,10,0));
points.push(new THREE.Vector3(10,0,0));
// 第一个顶点和最后一个顶点之间不会绘制线条,所以线条不闭合
var geometry = new THREE.BufferGeometry().setFromPoints(points);

// 创建一个蓝色线段材质
const material = new THREE.LineBasicMaterial( { color: 0x0000ff } );

const line = new THREE.Line( geometry, material );
scene.add(line);

var spotLight = new THREE.SpotLight(0xffffff);
spotLight.position.set(0,20,20);
spotLight.intensity = 5;
scene.add(spotLight);

// 渲染循环 render loop
function animate(){
    // requestAnimationFrame 当用户切换到其它的标签页时，它会暂停，因此不会浪费用户宝贵的处理器资源，也不会损耗电池的使用寿命
    requestAnimationFrame(animate);

    renderer.render(scene, camera);
}
export { animate }